<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<link rel="stylesheet" href="commonCSS/div-loading1.css" />
	
	<link rel="stylesheet" href="commonCSS/commonInitialize.css" />
	<!--
		！！！注意：引入样式表要注意顺序，特别是对于上面的初始化样式表与html字体设置@media媒体查询的样式表的引入顺序
		1. 一定要先写initialization初始化样式表，
		2.再引入HTML字体大小设置与媒体查询@media的样式表，否则整个body就不能居中显示了
	-->
	<link rel="stylesheet" href="commonCSS/htmlFontSize.css" />
	<link rel="stylesheet" href="commonCSS/bottomFixedList.css" />
	<!--上升回到顶部的火箭图片动画样式表-->
	<link rel="stylesheet" href="commonCSS/scrollToTopAnimation.css" />
	<link rel="stylesheet" href="userMessageCss/userMessage.css" />
	
</head>
<body>
	<!--动画效果的div元素-->
	<div class="hide-loading">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</div>
	<script src="indexJs/hideLoadingDiv-before.js"></script>
	<!--动画部分结束 end-->
	
	<!--header页头部分开始 start-->
	<header id="message-header">
		<div id="header-panel">
			<div onclick="history.back();" title="回退到上一个页面（back to last web page）">
				<strong>&lt;</strong>
			</div>
			<div>
				<h1>我的消息</h1>
			</div>
			<div>
				
			</div>
		</div>
		<div id="activity-message">
			<ul>
				<li>
					<a href="">
						<img src="userMessageImg/TG)(R95V1C~@`_FBTCHBQ7K.png" alt="" />
						<div>推荐活动</div>
					</a>
				</li>
				<li>
					<a href="">
						<img src="userMessageImg/TG)(R95V1C~@`_FBTCHBQ7K.png" alt="" />
						<div>交易动态</div>
					</a>
				</li>
				<li>
					<a href="">
						<img src="userMessageImg/TG)(R95V1C~@`_FBTCHBQ7K.png" alt="" />
						<div>互动消息</div>
					</a>
				</li>
			</ul>
		</div>
	</header>
	<!--页头部分结束 end-->
	
	<!--页面主体部分section开始 start-->
	<section id="message-section">
		<div id="no-message">
			<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1954006373,3468228869&fm=26&gp=0.jpg" alt="" />
		</div>
		<div id="message-box">
			<div id="filter-message">
				<form id="filter-form1">
					<div class="filter">
						<label><input type="radio" name="readState" value="0" /><span>已读消息</span></label>
						<label><input type="radio" name="readState" value="1" /><span>未读消息</span></label>
						
					</div>
				</form>
				<div id="column-direction-place">
					☷
				</div>
				<div id="row-direction-place">
					≡
				</div>
			</div>
			<ol class="message-ol" id="message-have-read" data-order="0">
				<li>
					<details class="message-details">
						<summary><strong>已读</strong></summary>
						<div>
							666-888-divs
						666-888-divs
						666-888-divs
						666-888-divs
						666-888-divs
						666-888-divs
						</div>
					</details>
				</li>
				<li>
					<details class="message-details">
						<summary><strong>message1</strong></summary>
						<div>
							666-888-divs
						666-888-divs
						666-888-divs
						666-888-divs
						666-888-divs
						666-888-divs
						</div>
					</details>
				</li>
				<li>
					<details class="message-details">
						<summary><strong>message1</strong></summary>
						<div>666-888-divs
						666-888-divs</div>
					</details>
				</li>
			</ol>
			<ol class="message-ol" id="message-unread" data-order="1">
				<li>
					<details class="message-details">
						<summary><strong>未读。。。</strong></summary>
						<div>666-888-divs
						666-888-divs</div>
					</details>
				</li>
				<li>
					<details class="message-details">
						<summary><strong>message1</strong></summary>
						<div>666-888-divs
						666-888-divs</div>
					</details>
				</li>
				<li>
					<details class="message-details">
						<summary><strong>message1</strong></summary>
						<div>666-888-divs
						666-888-divs</div>
					</details>
				</li>
			</ol>
			<ol class="message-ol" id="message" data-order="2">
				<li>
					<details class="message-details">
						<summary><strong>我不读……</strong></summary>
						<div>666-888-divs
						666-888-divs</div>
					</details>
				</li>
				<li>
					<details class="message-details">
						<summary><strong>message1</strong></summary>
						<div>666-888-divs
						666-888-divs</div>
					</details>
				</li>
				<li>
					<details class="message-details">
						<summary><strong>message1</strong></summary>
						<div>666-888-divs
						666-888-divs</div>
					</details>
				</li>
			</ol>
			<ol class="message-ol" id="message-ol1" data-order="2">
				<li>
					<details class="message-details">
						<summary><strong>我不读……</strong></summary>
						<div>666-888-divs
						666-888-divs</div>
					</details>
				</li>
				<li>
					<details class="message-details">
						<summary><strong>message1</strong></summary>
						<div>666-888-divs
						666-888-divs</div>
					</details>
				</li>
				<li>
					<details class="message-details">
						<summary><strong>message1</strong></summary>
						<div>666-888-divs
						666-888-divs</div>
					</details>
				</li>
			</ol>
		</div>
	</section>
	<!--页面主体部分section结束 end-->
	
	<!--页脚部分footer开始 start-->
	<footer id="message-footer">
		<!--窗口底部导航栏的通用结构与样式，样式表记得导入bottomList.css-->
		<div id="bottom-fixed">
			<div>
				<ul id="bottom-fixed-ul">
					<li id="backTop01">
						<a href="javascript:;">
							<img src="indexImg/TB18MU2H1L2gK0jSZPhXXahvXXa-96-96.png" alt="" />
							<p>ToTop</p>
						</a>
					</li>
					<li>
						<a href="index.html">
							<img src="indexImg/TB1cPNIHKT2gK0jSZFvXXXnFXXa-92-92.png" alt="" />
							<p>Main Page</p>
						</a>
					</li>
					<li>
						<a href="shopping.html">
							<img src="indexImg/TB1bHFXIkL0gK0jSZFAXXcA9pXa-96-96.png" alt="" />
							<p>Buy</p>
						</a>
					</li>
					<li>
						<a href="publishGoods.html">
							<img src="indexImg/TB178tSHRr0gK0jSZFnXXbRRXXa-92-92.png" alt="" />
							<p>Publish</p>
						</a>
					</li>
					
					<li>
						<a href="userCenter.html">
							<img src="indexImg/TB1INdMHNv1gK0jSZFFXXb0sXXa-92-92.png" alt="" />
							<p>Mine</p>
						</a>
					</li>
				</ul>
			</div>
		</div>
		<!--
			rocket-animation-div-area，点击回到顶部时出现-火箭上升运动的动画效果
			记得引入相关的
			css文件：<link rel="stylesheet" href="indexCss/scrollToTopAnimation.css" />
			和
			js文件：<script src="indexJs/scrollToTopAnimation.js"></script>
		-->
		<div id="fixedPicture">
			<img width="10vw" height="auto" src="indexImg/火箭01.png" alt="火箭--回到顶部" />
		</div>
		
	</footer>
	<!--页脚部分footer结束 end-->
	
		<script src="indexJs/scrollToTopAnimation.js"></script>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
		$(function() {
			
			$("#filter-form1 label").click(function() {
				let moveObj1 = $("ol[id*=read][data-order='" + ($(this).index()) + "']");
				moveVerticalPosition(moveObj1);
				/*moveObj1.insertBefore(
					moveObj1.parent().children().first().next()
				).css({
					"width": "100%"
				}).siblings("ol").css({
					"width": "50%"
				});*/
			});
			$("#row-direction-place").click(function() {
				$("#message-box").children("ol[id*=message]").css({
					"width": "100%"
					
				});
			});
			$("#column-direction-place").click(function() {
				$("#message-box").children("ol[id*=message]").css({
					"width": "50%",
					"border": ""
					
				});
			});
			
			show();
			function show() {
				if(!$("#message-box").children().length) {
					$("#no-message").stop(true).delay(200).css({
						"transform": "translateX(-50%) scale(1)"
					});//fadeIn(300);
					return;
				}
				$("#no-message").stop(true).delay(200).css({
					"transform": "translateX(-50%) scale(0)"
				});
			}
			// 下面是关于移动ol列表的函数，筛选是已读消息，还是未读消息
			function moveVerticalPosition(moveObj1, sure = 1) {
				try{
					if(moveObj1) {
						let halfWidth = 0;
						if(sure > 0) {
							halfWidth = "100%";
						}
						else {
							halfWidth = "50%";
						}
						// 传进来的对象都是可以正确获取存在的，接下来进行正常的操作
						moveObj1.insertBefore(
							moveObj1.parent().children().first().next()
						).css({
							"width": halfWidth,
							"border": "0.1rem solid #4956fa"
						}).children("li").css({
							"background": "#88da3a",
							"color": "white"
						}).parent()
						.siblings("ol").css({
							"width": "50%",
							"border": ""
						}).children("li").css({
							"background": "",
							"color": ""
						});
						
					}
				}catch(err){
					alert(err.message);
				}
			}
			
		});
		
	</script>
	<!--动画加载效果在页面完全加载好后才消失-->
	<script src="indexJs/hideLoadingDiv-after.js"></script>
</body>
</html>